<template>
  <!-- 查看客户信息窗口 -->
  <el-drawer title="客户信息" :visible.sync="drawerState" direction="rtl" :show-close="false" size="85%" :with-header="false" @open="drawerOpen"
             :destroy-on-close="true">
    <div class="el-drawer__title" id="drawerOpenId">客户信息</div>
    <el-form ref="form" :rules="rules" :model="form" label-width="120px" :disabled="disabledFormOne" v-loading="formLoadOne"
             element-loading-text="信息拉取中">
      <el-row>
        <el-col :span="7">
          <el-form-item label="申请人姓名">
            <el-input class="incolor" v-model="form.cName" :disabled="addFormGenJin"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="手机" prop="cPhone">
            <!-- <el-row :gutter="10"> -->
            <!-- <el-col :span="19"> -->
            <el-input class="incolor" v-model="form.cPhone" :disabled="addFormGenJin">
            </el-input>
            <!-- </el-col> -->
            <!-- <el-col :span="4">
                <el-popover placement="top-start" width="200" trigger="click">
                  <div class="qrCodeUrl" id="qrCodeUrl" ref="qrCodeUrl"></div>
                  <el-button slot="reference" icon="el-icon-phone" @click="clickTel(form.cPhone)"></el-button>
                </el-popover>
              </el-col> -->
            <!-- </el-row> -->
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="身份证">
            <el-input v-model="form.cIdCard"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="所属地区">
            <el-cascader v-model="cityDataSelected" :options="cityData" @change="handleChange" style="width: 100%"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="户籍地址">
            <el-input v-model="form.cPermanentAddress"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="性别">
            <el-select v-model="form.cSex" placeholder="请选择性别">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="年龄">
            <el-input v-model="form.cAge"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="学历">
            <el-input v-model="form.cEducation"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="毕业院校">
            <el-input v-model="form.cSchool"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="婚姻状况">
            <el-select v-model="form.cMarriageStatus" placeholder="请选择婚姻状况">
              <el-option label="未婚" value="0"></el-option>
              <el-option label="已婚" value="1"></el-option>
              <el-option label="离异" value="2"></el-option>
              <el-option label="丧偶" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="年收入（万）">
            <el-input v-model="form.cIncome"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="现居住地址">
            <el-input v-model="form.cLifeAddress"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="职业身份">
            <el-input v-model="form.cJob"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="客户情况">
            <el-input v-model="form.cRemarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="工作单位">
            <el-input v-model="form.cWork"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="签约时间">
            <el-date-picker v-model="form.cSuccessTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="企业纳税">
            <el-input v-model="form.cExpenditure"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="贷款额度">
            <el-input v-model="form.cQuota"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="签约情况">
            <el-input v-model="form.cSgnUpStatus"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="未签约原因">
            <el-input v-model="form.cFailReason"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="display: block; text-align: center" v-if="addFormGenJin">
        <el-button type="primary" @click="subFormOne('one')">保存</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="10">
        <div class="grid-content bg-purple">
          <div class="el-drawer__title">
            快捷录入
            <template v-if="pathName != '/InternationalWaters'">
              <template v-if="!disabledFormTwo && addFormGenJin">
                <span>
                  <el-button type="text" :loading="editFlagLoad" @click="signClick">{{ editFlag === '1' ? '取消标记' : '标记为重要客户' }}</el-button>
                </span>

                <span>
                  <el-button type="text" :loading="haiFlgload" @click="handleSetPublic">移入公海</el-button>
                </span>
              </template>
            </template>
          </div>
          <el-form ref="form" :model="formTwo" label-width="100px" :disabled="disabledFormTwo" v-loading="formLoadTwo">
            <el-form-item label="房产">
              <el-radio-group v-model="formTwo.house" size="medium">
                <el-radio border label="1">本地房</el-radio>
                <el-radio border label="2">外地房</el-radio>
                <el-radio border label="0">无房</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="车产">
              <el-radio-group v-model="formTwo.car" size="medium">
                <el-radio border label="1">有车产</el-radio>
                <el-radio border label="0">无车产</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="保单">
              <el-radio-group v-model="formTwo.policy" size="medium">
                <el-radio border label="1">有保单</el-radio>
                <el-radio border label="0">无保单</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="社保">
              <el-radio-group v-model="formTwo.socialSecurity" size="medium">
                <el-radio border label="1">有社保</el-radio>
                <el-radio border label="0">无社保</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="代发">
              <el-radio-group v-model="formTwo.shipping" size="medium">
                <el-radio border label="1">有代发</el-radio>
                <el-radio border label="0">无代发</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="微粒贷">
              <el-radio-group v-model="formTwo.smallLoan" size="medium">
                <el-radio border label="1">有微粒贷</el-radio>
                <el-radio border label="0">无微粒贷</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="企业纳税">
              <el-radio-group v-model="formTwo.payTaxes" size="medium">
                <el-radio border label="1">有企税</el-radio>
                <el-radio border label="0">无企税</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="信用卡">
              <el-radio-group v-model="formTwo.creditCard" size="medium">
                <el-radio border label="1">有信用卡</el-radio>
                <el-radio border label="0">无信用卡</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="公积金">
              <el-radio-group v-model="formTwo.fund" size="medium">
                <el-radio border label="1">有公积金</el-radio>
                <el-radio border label="0">无公积金</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="客户星级">
              <el-select v-model="formTwo.leavel" placeholder="请选择客户星级">
                <el-option label="A(重要客户)" value="A"></el-option>
                <el-option label="B(优质客户)" value="B"></el-option>
                <el-option label="C(普通客户)" value="C"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户备注">
              <el-input type="textarea" v-model="formTwo.remarks" rows="3" resize="none"></el-input>
            </el-form-item>
            <el-form-item label="跟进状态">
              <el-alert v-if="form.cStatus == '7'" title="已 签 约" type="warning" :closable='false' show-icon style="margin-bottom:20px;"></el-alert>
              <el-alert v-if="form.cStatus == '8'" title="已 进 件" type="warning" :closable='false' show-icon style="margin-bottom:20px;"></el-alert>
              <el-alert v-if="form.cStatus == '1'" title="已 完 成" type="success" :closable='false' show-icon style="margin-bottom:20px;"></el-alert>
              <el-select v-if="form.cStatus!='7'&&form.cStatus!='8'&&form.cStatus!='1'" v-model="form.cStatus" placeholder="请选择跟进状态">
                <el-option label="待跟进" value="0"></el-option>
                <el-option label="已跟进/在考虑" value="2"></el-option>
                <el-option label="已邀约/待上门" value="3"></el-option>
                <el-option label="已沟通/不需要" value="4"></el-option>
                <el-option label="已上门/待签约" value="5"></el-option>
                <el-option label="已上门/资质不符" value="6"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="跟进备注" v-if="addFormGenJin">
              <el-input type="textarea" v-model="formTwo.fuRemark" rows="3" resize="none"></el-input>
              <el-tag class="mr10" size="small" @click="quickClick('不需要')">不需要</el-tag>
              <el-tag class="mr10" size="small" @click="quickClick('未接')">未接</el-tag>
              <el-tag class="mr10" size="small" @click="quickClick('拒接')">拒接</el-tag>
              <el-tag class="mr10" size="small" @click="quickClick('秒挂')">秒挂</el-tag>
              <el-tag class="mr10" size="small" @click="quickClick('关机')">关机</el-tag>
              <el-tag class="mr10" size="small" @click="quickClick('停机')">停机</el-tag>
              <el-tag class="mr10" size="small" @click="quickClick('通话中')">通话中</el-tag>
              <el-tag class="mr10" size="small" @click="quickClick('加微信，待通过')">加微信，待通过</el-tag>
              <el-tag class="mr10" size="small" @click="quickClick('无法接通(空号/号码异常)')">无法接通(空号/号码异常)</el-tag>
            </el-form-item>
            <el-form-item style="display: block; text-align: center">
              <el-button type="primary" v-if="addFormGenJin" @click="subFormOne('two')">保存</el-button>
              <el-button type="primary" v-else @click="addInfoSub">新增保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="13">
        <div class="grid-content bg-purple-light" v-if="addFormGenJin">
          <div class="el-drawer__title">跟进备注记录</div>
          <div class="beizhu_text" style="box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)">
            <div v-for="(item, i) in formRightList">
              <div>
                {{ item.followUpUserName }} {{ item.fuCreateTime }}
                <el-popover placement="bottom" width="260" v-model="item.evaluateFlg">
                  <el-form ref="form" :model="item.form" label-width="40px">
                    <el-form-item label="评价">
                      <el-input type="textarea" autosize v-model="item.form.content"></el-input>
                    </el-form-item>
                  </el-form>
                  <div style="text-align: right; margin: 0">
                    <el-button type="primary" size="mini" @click="evaluateSubClick(item)">确定</el-button>
                  </div>
                  <el-button icon="el-icon-edit" slot="reference" type="text">点评</el-button>
                </el-popover>
              </div>
              <div>
                <span>{{ item.fuRemark }}</span>
                <!-- <div class="evaluateCont">
                  <span class="evaluateContSpan"></span>
                  <p>
                    <span>
                      刘国：过会再打几个试试
                      <el-tag size="mini" type="info">2023-09-19 09:10:02</el-tag>
                    </span>
                    <el-popover placement="bottom" width="260" v-model="item.replyFlg">
                      <el-form ref="form" :model="item.form" label-width="40px">
                        <el-form-item label="回复">
                          <el-input type="textarea" autosize v-model="item.form.content"></el-input>
                        </el-form-item>
                      </el-form>
                      <div style="text-align: right; margin: 0">
                        <el-button type="primary" size="mini" @click="evaluateSubClick(item)">确定</el-button>
                      </div>
                      <el-button slot="reference" icon="el-icon-s-comment" type="text">回复</el-button>
                    </el-popover>
                  </p>
                  <p>
                    <span>
                      张三 回复 刘国：试过啦还是关机
                      <el-tag size="mini" type="info">2023-09-19 09:10:02</el-tag>
                    </span>
                    <el-popover placement="bottom" width="260" v-model="item.replyFlg">
                      <el-form ref="form" :model="item.form" label-width="40px">
                        <el-form-item label="回复">
                          <el-input type="textarea" autosize v-model="item.form.content"></el-input>
                        </el-form-item>
                      </el-form>
                      <div style="text-align: right; margin: 0">
                        <el-button type="primary" size="mini" @click="evaluateSubClick(item)">确定</el-button>
                      </div>
                      <el-button slot="reference" icon="el-icon-s-comment" type="text">回复</el-button>
                    </el-popover>
                  </p>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="el-drawer__title" v-if="addFormGenJin">提醒计划</div>
    <el-row v-if="addFormGenJin">
      <el-col :span="10">
        <el-form ref="formThree" :model="formThree" label-width="120px" :disabled="disabledFormThree" v-loading="formLoadThree">
          <el-form-item label="下次提醒时间">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="formThree.dateOne" style="width: 100%" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center">-</el-col>
            <el-col :span="11">
              <el-time-picker placeholder="选择时间" v-model="formThree.dateTwo" style="width: 100%" value-format="HH:mm:ss"></el-time-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="下次提醒备注">
            <el-input type="textarea" v-model="formThree.cNextRemarks" rows="3" resize="none"></el-input>
          </el-form-item>
          <el-form-item style="display: block; text-align: center">
            <el-button type="primary" @click="subFormOne">保存</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script>
import {
  customerTabledataAjax,
  customerRightAjax,
  customerSetFlagAjax,
  customerSetPublicAjax,
  customerFormOneAjaxSub,
  customerFormTwoAjaxSub,
  customerFormThreeAjaxSub,
  InternationalWatersAddAjaxSub
} from '../../api/index';
import CITYARRDATA from '../../utils/city';
import QRCode from 'qrcodejs2';

export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error('请输入正确的手机号'));
        }
      }
    };
    return {
      pathName: '',
      drawerState: false,
      editId: '',
      editFlag: '',
      editFlagLoad: false,

      haiFlgload: false,

      formStatus: false,
      form: {},
      rules: {
        cPhone: [
          { validator: checkPhone, trigger: 'blur' }
        ]
      },
      formLoadOne: false,
      formTwo: {},
      formLoadTwo: false,
      formThree: {},
      formLoadThree: false,

      formRightList: [],

      disabledFormOne: false,
      disabledFormTwo: false,
      disabledFormThree: false,

      addFormGenJin: true,
      addObj: {},

      cityData: [],
      cityDataSelected: [],
    };
  },
  props: ['activeIndexId'],
  created() {
    this.cityData = CITYARRDATA;
    this.pathName = this.$route.path;
  },
  watch: {
    drawerState: function(n) {
      if (!n) {
        this.editId = '';
        this.editFlag = '';
        this.$emit('fathergetData');
      }
    }
  },
  methods: {
    //点击查看客户信息
    drawerStateClick(id, flag, tccc) {
      if (id) {
        this.drawerRightList(id);
        this.editId = id;
        this.editFlag = flag;
        this.drawerState = true;

        this.formLoadOne = true;
        this.formLoadTwo = true;
        this.formLoadThree = true;

        customerTabledataAjax({ cId: id }).then((res) => {
          this.formLoadOne = false;
          this.formLoadTwo = false;
          this.formLoadThree = false;
          if (res.code === 0) {
            // this.formStatus = res.customers.cStatus == '0' ? false : true;
            this.$set(this, 'form', res.customers);
            this.$set(this, 'formTwo', res.qualification);
            this.formThree = {
              dateOne: "",
              dateTwo: "",
              cNextRemarks: "",
            }
            this.cityDataSelected = [res.customers.cProvince, res.customers.cCity];
            if (tccc == 'tccc' && window.tccc) {
              window.tccc.Call.startOutboundCall({
                phoneNumber: Number(res.customers.cPhone),
              }).then((res) => {
                // this.sessionId = res.data.sessionId;
                this.$message.success('云呼开始呼叫');
              }).catch((err) => {
                this.$message(err.errorMsg);
              })
            }
          } else if (res.code === 501) {
            this.$message(res.msg);
            this.drawerState = false;
          } else {
            this.$message(res.msg);
          }
        });
      }
    },
    //读取跟进记录
    drawerRightList(id) {
      customerRightAjax({ cId: id }).then((res) => {
        if (res.code === 0) {
          res.records.map(item => {
            item.evaluateFlg = false;
            item.form = { content: '' };
          })
          this.formRightList = res.records;
          console.log(this.formRightList)
        } else {
          this.$message(res.msg);
        }
      });
    },
    //新增展示
    drawerStateAdd() {
      this.drawerState = true;
      this.addFormGenJin = false;
      this.addInfo();
    },
    //当前组件没的表单全部改为只读状态
    disabledForm() {
      this.disabledFormOne = true;
      this.disabledFormTwo = true;
      this.disabledFormThree = true;
    },
    //标记客户
    signClick() {
      this.editFlagLoad = true;
      customerSetFlagAjax({ cId: this.editId }).then((res) => {
        this.editFlagLoad = false;
        if (res.code === 0) {
          if (res.isFlag === '0') {
            this.editFlag = '0';
            this.$message.success('取消成功');
          } else {
            this.editFlag = '1';
            this.$message.success('标记成功');
          }
        } else {
          this.$message(res.msg);
        }
      });
    },
    //放入公海
    handleSetPublic() {
      this.haiFlgload = true;
      customerSetPublicAjax({ cIds: [this.editId] }).then((res) => {
        this.haiFlgload = false;
        if (res.code === 0) {
          this.$message.success('放入成功');
          this.drawerState = false;
        } else {
          this.$message(res.msg);
        }
      });
    },
    //提交客户信息
    subFormOne(flg) {
      if (flg === 'one') {
        this.subFormOneAjax(this.form);
      } else if (flg === 'two') {
        this.formTwo.cStatus = this.form.cStatus;
        this.formTwo.cId = this.form.cId;
        this.subFormTwoAjax(this.formTwo);
      } else {
        this.formThree.cNextTime = this.formThree.dateOne + ' ' + this.formThree.dateTwo;
        this.formThree.cId = this.form.cId;
        this.subFormThreeAjax(this.formThree);
      }
    },
    //form1
    subFormOneAjax(form) {
      this.formLoadOne = true;
      customerFormOneAjaxSub(form).then((res) => {
        this.formLoadOne = false;
        if (res.code === 0) {
          this.$message.success('保存成功');
        } else {
          this.$message(res.msg);
        }
      });
    },
    //form2
    subFormTwoAjax(form) {
      this.formLoadTwo = true;
      customerFormTwoAjaxSub(form).then((res) => {
        this.formLoadTwo = false;
        if (res.code === 0) {
          this.$message.success('保存成功');
          this.drawerRightList(this.editId);
        } else {
          this.$message(res.msg);
        }
      });
    },
    //form3
    subFormThreeAjax(form) {
      if (form.dateOne && form.dateTwo && form.cNextRemarks) {
        this.formLoadThree = true;
        customerFormThreeAjaxSub(form).then((res) => {
          this.formLoadThree = false;
          if (res.code === 0) {
            this.$message.success('保存成功');
          } else {
            this.$message(res.msg);
          }
        });
      } else {
        this.$message("请填写完整表单");
      }
    },
    //新增初始化
    addInfo() {
      customerTabledataAjax({ cId: '' }).then((res) => {
        if (res.code === 0) {
          this.$set(this, 'form', res.customers);
          this.$set(this, 'formTwo', res.qualification);
        }
      });
    },
    //新增提交
    addInfoSub() {
      this.formLoadOne = true;
      this.formLoadTwo = true;
      let flgPage = '';
      if (this.$route.path == '/WaitCustomer') {
        flgPage = '2';
      } else {
        flgPage = '1';
      }
      let addform = { ...this.form, ...this.formTwo, fromPage: flgPage, seasId: this.activeIndexId };

      InternationalWatersAddAjaxSub(addform).then((res) => {
        this.formLoadOne = false;
        this.formLoadTwo = false;
        if (res.code === 0) {
          this.$message.success('新增成功');
          this.drawerState = false;
        } else {
          this.$message(res.msg);
        }
      });
    },
    //选中所属地区
    handleChange(val) {
      this.form.cProvince = val[0];
      this.form.cCity = val[1];
    },
    //点击电话生成二维码
    clickTel(tel) {
      if (tel) {
        document.getElementById('qrCodeUrl').innerHTML = '';
        this.creatQrCode('http://www.dazhimu.cc/mobile/telHref.html?tel=' + tel, document.getElementById('qrCodeUrl'));
      }
    },
    //生成二维码
    creatQrCode(text, item) {
      new QRCode(item, {
        text: text,
        width: 200,
        height: 200,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    //快捷跟进记录
    quickClick(str) {
      this.$set(this.formTwo, 'fuRemark', str);
    },
    //打开弹窗事件
    drawerOpen() {
      // window.location.hash = '#drawerOpenId';
    },
    //评价提交
    evaluateSubClick(item) {
      item.evaluateFlg = false;
      console.log(item);
    }
  }
};
</script>

<style scoped>
/deep/ :focus {
    outline: 0;
}
.el-drawer__title {
    color: #72767b;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 25px;
    padding: 20px 35px 0;
}
.el-drawer__title span {
    font-size: 14px;
    color: #66b1ff;
    margin: 20px;
    cursor: pointer;
}
.el-radio {
    margin-right: 0px;
}
.beizhu_text {
    height: 794px;
    overflow: auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-left: 35px;
    padding: 20px;
    box-sizing: border-box;
    color: #72767b;
    font-size: 14px;
}
.beizhu_text > div:first-child {
    padding-top: 0;
}
.beizhu_text > div {
    padding: 5px 0;
}
.el-select {
    width: 100%;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 100%;
}
.qrCodeUrl >>> img {
    margin: 0 auto;
}
.incolor >>> .el-input__inner {
    color: red !important;
}
.mr10 {
    margin-right: 10px;
    cursor: pointer;
}
.evaluateCont {
    background: #f4f4f5;
    padding: 5px 15px;
    border-radius: 5px;
    margin-top: 10px;
    position: relative;
}
.evaluateContSpan {
    position: absolute;
    width: 0;
    height: 0;
    top: -5px;
    border: 5px solid #f4f4f5;
    border-right-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(45deg);
}
</style>
